<template>
	<view class="shop-container">

		<!-- 轮播图 -->
		<view class="banner-container">
			<swiper class="banner-swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500">
				<swiper-item v-for="(banner, index) in banners" :key="index">
					<image class="banner-image" :src="banner" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 分类图标 -->
		<view class="categories">
			<view class="category-item" v-for="(category, index) in categories" :key="index">
				<image class="category-icon" :src="category.icon" mode="aspectFill"></image>
				<text class="category-name">{{ category.name }}</text>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="products">
			<view class="product-item" v-for="(product, index) in products" :key="index">
				<text class="product-label">{{ product.label }}</text>
				<image class="product-image" :src="product.image" mode="aspectFill"></image>
				<text class="product-name">{{ product.name }}</text>
				<text class="product-desc">{{ product.description }}</text>
				<view class="product-footer">
					<view class="price-info">
						<text class="product-price">¥{{ product.price }}</text>
						<text class="payment-option">{{ product.paymentOption }}</text>
					</view>
					<view class="action-area">
						<text class="sold-count">已售{{ product.soldCount || 0 }}</text>
						<view class="cart-icon" @click="showProductDetail(product)">
							<text class="cart-text">🛒</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品详情弹窗 -->
		<view class="product-detail-mask" v-show="showDetailPopup" @click="hideProductDetail">
			<view class="product-detail-popup" @click.stop>
				<view class="popup-header">
					<text class="popup-title">商品详情</text>
					<view class="close-btn" @click="hideProductDetail">✕</view>
				</view>

				<view class="popup-content" v-if="selectedProduct">
					<image class="popup-image" :src="selectedProduct.image" mode="aspectFill"></image>
					<view class="popup-info">
						<text class="popup-name">{{ selectedProduct.name }}</text>
						<text class="popup-desc">{{ selectedProduct.description }}</text>
						<view class="popup-price-area">
							<text class="popup-price">¥{{ selectedProduct.price }}</text>
							<text class="popup-payment">{{ selectedProduct.paymentOption }}</text>
						</view>
						<text class="popup-sold">已售{{ selectedProduct.soldCount || 0 }}件</text>
					</view>
				</view>

				<view class="popup-actions">
					<view class="quantity-control">
						<view class="quantity-btn" @click="decreaseQuantity">−</view>
						<text class="quantity-num">{{ quantity }}</text>
						<view class="quantity-btn" @click="increaseQuantity">+</view>
					</view>
					<view class="add-cart-btn" @click="addToCart">
						<text class="add-cart-text">加入购物车</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mockData,
		utils
	} from '@/utils/mockData.js'
	import {
		get
	} from '@/utils/request'

	export default {
		data() {
			return {
				categories: mockData.categories,
				products: mockData.products.slice(0, ), // 只显示前两个商品作为示例
				banners: [],
				showDetailPopup: false,
				selectedProduct: null,
				quantity: 1
			}
		},
		onLoad() {
			this.fetchBanners()
		},
		methods: {
			//商城页轮播图
			async fetchBanners() {
			  const res = await get('/order/carousel/list', { pageNum: 1, pageSize: 50, carouselType: '商城页轮播图' })
			  console.log(res.code)
			  const rows = Array.isArray(res?.rows) ? res.rows : (Array.isArray(res) ? res : [])
			  const list = rows.filter(i => i.carouselType === '商城页轮播图' && i.status === 1)
			
			  const FILE_BASE = (process.env.VUE_APP_FILE_BASE || process.env.VUE_APP_BASE_API || '').replace(/\/$/, '')
			  const normalize = (u) => {
			    if (!u) return ''
			    if (/^https?:\/\//i.test(u)) return u            // 不再强制替换为 https
			    return `${FILE_BASE}${u.startsWith('/') ? '' : '/'}${u}`
			  }
			
			  this.banners = list.map(i => normalize(i.carouselImage)).filter(Boolean)
			  console.log('banners:', this.banners)
			},
			// 选择分类
			selectCategory(category) {
				console.log('选择分类:', category)
			},
			// 显示商品详情
			showProductDetail(product) {
				this.selectedProduct = product
				this.quantity = 1
				this.showDetailPopup = true
			},
			// 隐藏商品详情
			hideProductDetail() {
				this.showDetailPopup = false
				this.selectedProduct = null
			},
			// 增加数量
			increaseQuantity() {
				this.quantity++
			},
			// 减少数量
			decreaseQuantity() {
				if (this.quantity > 1) {
					this.quantity--
				}
			},
			// 添加到购物车
			addToCart() {
				if (!this.selectedProduct) return

				console.log('添加到购物车:', {
					product: this.selectedProduct,
					quantity: this.quantity
				})

				// 显示成功提示
				uni.showToast({
					title: '已添加到购物车',
					icon: 'success',
					duration: 1500
				})

				// 模拟增加已售数量
				this.selectedProduct.soldCount = (this.selectedProduct.soldCount || 0) + this.quantity

				// 关闭弹窗
				this.hideProductDetail()

				// 这里可以调用实际的API
				// this.callAddToCartAPI(this.selectedProduct, this.quantity)
			}
		}
	}
</script>

<style scoped>
	.shop-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 100rpx;
	}

	/* 轮播图样式 */
	.banner-container {
		margin: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
		height: 300rpx;
	}

	.banner-swiper {
		width: 100%;
		height: 100%;
	}

	.banner-image {
		width: 100%;
		height: 100%;
	}

	/* 分类图标 */
	.categories {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 12rpx;
		padding: 30rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30rpx;
	}

	.category-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 15rpx;
	}

	.category-icon {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #f0f0f0;
	}

	.category-name {
		font-size: 24rpx;
		color: #333;
		text-align: center;
		line-height: 1.3;
	}

	/* 商品列表 */
	.products {
		margin: 20rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.product-item {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.product-label {
		font-size: 22rpx;
		color: #666;
		background-color: #f8f8f8;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
		align-self: flex-start;
	}

	.product-image {
		width: 100%;
		height: 200rpx;
		border-radius: 8rpx;
		background-color: #f0f0f0;
	}

	.product-name {
		font-size: 26rpx;
		color: #333;
		font-weight: bold;
		line-height: 1.3;
	}

	.product-desc {
		font-size: 22rpx;
		color: #666;
		line-height: 1.3;
	}

	.product-footer {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: 10rpx;
	}

	.price-info {
		flex: 1;
	}

	.product-price {
		font-size: 32rpx;
		color: #ff6b35;
		font-weight: bold;
	}

	.payment-option {
		font-size: 20rpx;
		color: #007AFF;
		display: block;
		margin-top: 4rpx;
	}

	.action-area {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 8rpx;
	}

	.sold-count {
		font-size: 20rpx;
		color: #999;
	}

	.cart-icon {
		width: 60rpx;
		height: 60rpx;
		background-color: #ff6b35;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cart-text {
		font-size: 24rpx;
		color: #fff;
	}

	/* 商品详情弹窗 */
	.product-detail-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;
		display: flex;
		align-items: flex-end;
	}

	.product-detail-popup {
		width: 100%;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		animation: slideUp 0.3s ease-out;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.popup-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.close-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #666;
	}

	.popup-content {
		padding: 30rpx;
		display: flex;
		gap: 20rpx;
	}

	.popup-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
		background-color: #f0f0f0;
	}

	.popup-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.popup-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.popup-desc {
		font-size: 24rpx;
		color: #666;
		line-height: 1.4;
	}

	.popup-price-area {
		margin: 10rpx 0;
	}

	.popup-price {
		font-size: 36rpx;
		color: #ff6b35;
		font-weight: bold;
	}

	.popup-payment {
		font-size: 22rpx;
		color: #007AFF;
		margin-left: 10rpx;
	}

	.popup-sold {
		font-size: 22rpx;
		color: #999;
	}

	.popup-actions {
		padding: 30rpx;
		border-top: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.quantity-btn {
		width: 60rpx;
		height: 60rpx;
		border: 1rpx solid #ddd;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #333;
	}

	.quantity-num {
		font-size: 28rpx;
		color: #333;
		min-width: 60rpx;
		text-align: center;
	}

	.add-cart-btn {
		background-color: #ff6b35;
		padding: 20rpx 60rpx;
		border-radius: 50rpx;
	}

	.add-cart-text {
		font-size: 28rpx;
		color: #fff;
		font-weight: bold;
	}
</style>